<template>
  <div class="topbar">
    <div class="container">
      <div class="topbar-nav">
        <span :key="index" v-for="(item,index) of topBarNavList">{{ item }}</span>
      </div>
      <div class="userinfo">
        <div class="login-in">
          <span>登录</span>
          <span>注册</span>
          <span>消息通知</span>
        </div>
        <div class="cart" id="cart">
          <i class="iconfont icon-gouwuche"></i>
          <span class="count">购物车（0）</span>
          <div class="cart-menu " id="cartMenu">
            <div class="box">
              <div class="loader"></div>
              <span class="no-msg">购物车中还没有商品，赶紧选购吧！</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery';

export default {
  name: "TopBar",
  data() {
    return {
      topBarNavList: ['小米商城', 'MIUI', 'IoT', '云服务', '天星数科', '有品', '小爱开放平台', '企业团购', '资质证照', '协议规则', '下载app', '智能生活', 'Select Location']
    }
  },
  mounted() {
    //获取id为cart的按钮
    const cart = $('#cart');
    //获取id为cartMenu的元素
    const cartMenu = $('#cartMenu');
    //给按钮绑定鼠标响应事件
    $(cart).bind({
      'mouseenter': function () {
        $(this).css({'backgroundColor': '#FFFFFF'});
        $('#cart>.iconfont,.count').css({'color': '#FF6700'})
        $(cartMenu).stop().slideDown(300, 'swing')
      },
      'mouseleave': function () {
        $(this).css({'backgroundColor': '#424242'});
        $('#cart>.iconfont,.count').css({'color': '#b0b0b0'})
        $(cartMenu).stop().slideUp(300, 'swing')
      }
    })
    //创建div元素节点
    const divCode = $('<div id="downloadCode">');
    const triangle = $('<div class="triangle">');
    //创建image元素节点
    const imageCode = $('<img alt="" src="./src/assets/images/download.png">');
    //设置小三角样式
    triangle.css({
      'width': ' 0px ',
      'height': '0px',
      'border-bottom': '7px solid #FFF',
      'border-left': '7px solid transparent',
      'border-right':'7px solid transparent',
      'position': 'absolute',
      'top':'-5px',
      'left':'50%',
      'transform':'translateX(-50%)'
    });
    //设置下载二维码容器样式
    divCode.css({
      'width': '124px',
      'height': '148px',
      'position': 'absolute',
      'box-shadow': '0 1px 10px 0 #a7a7a7',
      'background': '#ffffff',
      'top': '40px',
      'left': '-50%',

    });
    //设置img标签样式
    imageCode.css({
      'width': '124px',
      'height': '148px'
    });
    //将小三角，图片放入容器中
    divCode.append(triangle,imageCode);
    //隐藏容器
    divCode.hide();

    imageCode.attr('src','./src/assets/images/download.png');

    $('.topbar-nav>span').eq(10).append(divCode).bind({
      'mouseenter': function () {
        divCode.stop().slideDown()
      },
      'mouseleave': function () {
        divCode.stop().slideUp()
      }
    });

  },
  methods: {}
}
</script>

<style scoped lang="scss">

.topbar {
  width: 100%;
  height: 40px;
  background-color: #333333;
  display: flex;
  justify-content: center;

  .container {
    height: 100%;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 11;

    .topbar-nav {
      display: flex;
      height: 100%;
      align-items: center;

      span {
        color: #b0b0b0;
        font-size: 12px;
        height: 100%;
        display: flex;
        align-items: center;
        position: relative;
        padding: 0 8.5px;
        cursor: pointer;

        &:hover {
          color: white;
        }

        &:before {
          content: '|';
          display: block;
          position: absolute;
          color: rgb(66, 66, 66);
          top: 50%;
          transform: translateY(-50%);
          right: 0;
        }

        &:first-child {
          padding-left: 0;
        }

        &:nth-of-type(11) {
          position: relative;

        }
      }
    }

    .userinfo {
      display: flex;
      height: 100%;
      align-items: center;

      .login-in {
        display: flex;
        height: 100%;
        align-items: center;
        color: #b0b0b0;

        span {
          font-size: 12px;
          height: 100%;
          display: flex;
          align-items: center;
          padding: 0 8px;
          position: relative;

          &:hover {
            color: white;
          }

          &:before {
            content: '|';
            display: block;
            position: absolute;
            color: rgb(66, 66, 66);
            top: 50%;
            transform: translateY(-50%);
            right: 0;

          }

          &:first-child {
            padding-left: 0;
          }
        }
      }

      .cart {
        width: 120px;
        height: 100%;
        background-color: #424242;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #b0b0b0;
        margin-left: 15px;

        i {
          font-size: 16px;
          margin-right: 4px;
        }

        span {
          font-size: 12px;
        }

        .cart-menu {
          display: none;
          position: absolute;
          width: 316px;
          height: 100px;
          background-color: white;
          right: 0;
          top: 40px;
          box-shadow: 0 1px 10px 0 #a7a7a7;
          z-index: -1;

          .box {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }

    }


  }

}
</style>